<template>
	<!-- 我的 -->
	<view>
		<view class="topbar">
			<image class='bg' src="/static/image/index-bg@3x.jpg" catchtap='navmap'>
			</image>
			<view class="header">
				<!-- <view class="" style="text-align: center;display: flex;justify-content: space-between;align-items: center;">
						<image src="/static/image/indexLogo.png" style="width: 580rpx;height: 141rpx;"></image>
						<image v-if="userInfo" :src="userInfo.Icon" class="userAvatarUrl" mode="">
							</image>
					</view>
					<view style="margin-top: 20rpx;">
						<view class="UCenter-bg">
							<block v-if="userInfo">
								
									<view class="userNickName">
										<text style="color:#333">欢迎您,{{userInfo.Name?userInfo.Name:userInfo.NickName}}!</text>
									</view>
							</block>
							<block v-else>
								<view class="denglu" @click="login">登录/注册</view>
							</block>
						</view>
					</view> -->
				<view class="flex" v-if="!userInfo.UnionId" style="background-color:transparent;flex-direction: column;">
					<image style="width: 580rpx;height: 141rpx;" src="/static/image/indexLogo.png" m></image>
					<view class="denglu" @click="login">登录/注册</view>
				</view>
				<view v-else>
					<view class="userNickName">
						<text style="color:#333">欢迎您,{{ userInfo.Name ? userInfo.Name : userInfo.NickName }}!</text>
					</view>
					<view class="flex jbetween"
						style="display:flex;justify-content: space-between;align-items: center;padding: 30rpx 40rpx 20rpx 12rpx;">
						<view class="" style="">
							<image style="width: 580rpx;height: 141rpx;" src="/static/image/indexLogo.png" m></image>
						</view>
						<view class="userAvatarUrl">
							<view class="UCenter-bg">
								<block v-if="userInfo">
									<image :src="userInfo.Icon" class="headerimg"></image>
								</block>
								<block v-else></block>
							</view>
						</view>
					</view>
				</view>
				<view class="nav">
					<view class="nav-item" @click="userimgsc">
						<image src="/static/image/my-2@2x.png" style="width:33rpx; height:33rpx;" />
						<view>个人中心</view>
						<view class="angle"></view>
					</view>
					<view class="nav-item" @click="link('联系我们', '/subPackagesB/pages/freeTell/freeTell')">
						<image src="/static/image/my-6@2x.png" style="width:33rpx; height:33rpx;" />
						<view>联系我们</view>
						<view class="angle"></view>
					</view>
					<view class="nav-item" @click="link('服务协议', 'https://www.zytsaas.com/Agreement/ElevatorGo_FWXY.html')"
						data-url="">
						<image src="/static/image/my-1@3x.png" style="width:33rpx; height:33rpx;" />
						<view>服务协议</view>
						<view class="angle"></view>
					</view>
					<view class="nav-item" @click="link('隐私政策', 'https://www.zytsaas.com/Agreement/ElevatorGo_YSZC.html')"
						data-url="">
						<image src="/static/image/my-3@3x.png" style="width:33rpx; height:33rpx;" />
						<view>隐私政策</view>
						<view class="angle"></view>
					</view>
					<view v-if="userInfo" class="nav-item" @click="loginOut"
						style="display: flex;justify-content: center;margin-top: 50rpx;color:#fff;background-color: #d1100b;">
						<view>退出登录</view>
					</view>
					<view class="" style="text-align: center;margin-top: 50rpx;font-size:25rpx;color:#999">
						{{ version_number ? 'v' + version_number : "" }}
					</view>
					<!-- 公共底部导航栏 -->
					<bar :currentItem="2" @changeItem="changeItem" />
				</view>
			</view>
		</view>

	</view>
</template>
<script>
import bar from "../../components/bar.vue" //用用公共底部导航栏
const app = getApp()
export default {
	components: {
		bar
	},
	data() {
		return {
			version_number: "11", //当前版本号
			userInfo: '', //用户信息
			id: '',
			info: null,
			statusBarHeight: app.globalData.statusBarHeight,
		};
	},
	onLoad(options) { },
	onShow() {
		uni.hideTabBar()
		let token = uni.getStorageSync('token') //token
		let userInfo = uni.getStorageSync('userInfo')
		this.userInfo = userInfo
		this.id = token

		// 条件编辑只在微信小程序显示
		// #ifdef MP-WEIXIN
		const accountInfo = wx.getAccountInfoSync();
		this.version_number = accountInfo.miniProgram.version // 小程序 版本号
		// #endif

	},
	// 下拉刷新
	onPullDownRefresh() {
		uni.stopPullDownRefresh();
	},
	// 上拉加载更多
	onReachBottom() { },
	methods: {
		// 退出登录
		loginOut() {
			this.$util.showConfirm({
				content: '是否确认退出登录?',
				confirmText: "退出登录"
			}).then(res => {
				if (res.confirm) {
					uni.showLoading({
						title: '正在退出...'
					})
					uni.removeStorageSync('token')
					uni.removeStorageSync('userInfo')
					setTimeout(function () {
						uni.hideLoading()
						uni.switchTab({
							url: '/pages/index/index',
						})
					}, 1500)

				} else {

				}
			})
		},
		changeItem(item) {
			// 校验是否授权登录
			var tokens = uni.getStorageSync('token')
			if (item.id == 1) {
				if (!tokens) {
					this.$util.showConfirm({
						content: '检测当前未登录，点击确定前往登录',
						confirmText: "去登录"
					}).then(res => {
						if (res.confirm) {
							uni.redirectTo({
								url: '/subPackagesA/pages/login/login',
							})
						} else {
							// uni.switchTab({
							// 	url: '/pages/index/index',
							// })
						}
					})
					return
				}
				uni.navigateTo({ //查询
					url: item.path
				})
			} else {
				uni.switchTab({
					url: item.path
				})
			}
		},
		// 登录注册
		login() {
			uni.navigateTo({
				url: "/subPackagesA/pages/login/login"
			})
		},
		// 用户头衔点击事件
		userimgsc: function () {
			var tokens = uni.getStorageSync('token')
			if (tokens) {
				uni.navigateTo({
					url: '/subPackagesB/pages/info/info',
				})
			} else {
				this.$util.showConfirm({
					content: '检测当前未登录，点击确定前往登录',
					confirmText: "去登录"
				}).then(res => {
					if (res.confirm) {
						uni.redirectTo({
							url: '/subPackagesA/pages/login/login',
						})
					} else {
						// uni.switchTab({
						// 	url: '/pages/index/index',
						// })
					}
				})
			}
		},

		link(title, url) {
			if (title === '联系我们') return uni.navigateTo({
				url: url
			})
			let newUrl = '/subPackagesA/pages/webview/webview?url=' + url + '&title=' + title
			uni.navigateTo({
				url: newUrl
			})
		},
	}
};
</script>
<style lang="scss" scoped>
// /* #ifdef MP */

// page{
// 	 padding-bottom: calc(constant(safe-area-inset-bottom));
//     padding-bottom: calc(env(safe-area-inset-bottom));
// }

// /* #endif */

.denglu {
	width: 198rpx;
	height: 58rpx;
	line-height: 58rpx;
	background-color: #CA151D;
	font-size: 22rpx;
	color: #FFF;
	border-radius: 50rpx;
	margin: 25rpx auto;
	text-align: center;
	// position: relative;
}

.header {
	// width: 700rpx;
	height: 210rpx;
	position: relative;
	top: 50rpx;
	// left: 25rpx;
}

.setting {
	position: absolute;
	top: 105rpx;
	overflow: hidden;
	right: 30rpx;
	width: 100rpx;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
}

.header>image:first-child {
	width: 350rpx;
	height: 50rpx;
	z-index: -1;
	margin: 0 auto;
}

.userAvatarUrl {
			width: 75rpx;
			height: 75rpx;

			.UCenter-bg {
				.headerimg {
					width: 75rpx;
					height: 75rpx;
					border-radius: 75rpx;
				}
			}
		}

.nav {
	width: 750rpx;
	padding: 0 45rpx;
	margin-top: 150rpx;
	// position: absolute;
	top: 430rpx;
}

.nav-item {
	width: 660rpx;
	height: 100rpx;
	margin-top: 25rpx;
	border-radius: 15rpx;
	background-color: white;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	letter-spacing: 3rpx;
	font-size: 26rpx;
}

.nav-item image {
	margin-left: 30rpx;
}

.nav-item view:nth-child(2) {
	margin-left: 36rpx;
}

.userNickName {
	width: 500rpx;
	position: absolute;
	top: 210rpx;
	color: white;
	left: 200rpx;
	font-size: 30rpx;
}

.bg {
	width: 100%;
	height: 500rpx;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

.topbar {
	width: 100%;
	height: 500rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}

.headerimg {
	width: 75rpx;
	height: 75rpx;
	border-radius: 75rpx;
}
</style>